<template>
  <div class="content">
    <div class="div-head">
      <h3>基本信息</h3>
    </div>
    <div class="div-info">
      <el-form
        :model="form"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 1 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="*登录账号">
              <el-input v-model="form.employee_login"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="*真实姓名">
              <el-input v-model="form.employee_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 2 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="*登录密码">
              <el-input
                v-model="form.employee_password"
                show-password
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="*重复密码">
              <el-input
                v-model="form.employee_password"
                show-password
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 3 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="*所在部门">
              <el-select
                v-model="form.dept_id"
                clearable
                placeholder="请选择"
                class="selectBox"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.dept_name"
                  :value="item.dept_id"
                >
                </el-option>
              </el-select>
              <el-button @click="open" type="success" icon="el-icon-circle-plus"
                >新增</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="*角色权限">
              <el-select
                v-model="form.role_name"
                clearable
                placeholder="请选择"
                class="selectBox"
              >
                <el-option
                  v-for="item in optionsRoot"
                  :key="item.value2"
                  :label="item.role_name"
                  :value="item.role_name"
                >
                </el-option>
              </el-select>
              <el-button
                @click="open2"
                type="success"
                icon="el-icon-circle-plus"
                >新增</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 4 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="客户数量限制">
              <el-input
                v-model="form.employee_clientlimit"
                class="limit"
              ></el-input
              >0为不限制
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="员工提成">
              <el-input v-model="form.employee_sal" class="limit"></el-input>
              %(允许数值为0.01%-100%)
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 5 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="头像">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
                <el-button size="small" type="primary">选择文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="头像预览"> </el-form-item>
          </el-col>
        </el-row>
        <!-- 6 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="手机号码">
              <el-input v-model="form.employee_tel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="Email">
              <el-input v-model="form.employee_email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 7 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="性别">
              <el-radio v-model="form.employee_sex" label="1">男</el-radio>
              <el-radio v-model="form.employee_sex" label="2">女</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="生日">
              <el-date-picker
                v-model="form.employee_birthday"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 8 -->
        <el-row class="footBtn">
          <el-button :plain="true" @click="btnSave">保存</el-button>
          <!-- <el-button type="primary" @click="btnSave">保存</el-button> -->
          <el-button type="info" @click="btnClose" class="btnClose"
            >关闭</el-button
          >
        </el-row>
      </el-form>
    </div>
  </div>
</template>


<script>
import {
  addStaffAxios,
  addDepSelectAxios,
  addDepRoleAxios,
  addDepAxios,
} from "../../http/apis/staffApi/index";
export default {
  name: "AddStaff",
  data() {
    return {
      id: [],
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      form: {
        dept_id: "", // 部门id
        employee_login: "", // 账号
        employee_name: "", //真实姓名
        employee_password: "", //密码
        employee_clientlimit: 0, //客户数量限制
        employee_sal: 0, //提成
        employee_tel: "", // 手机号码
        employee_email: "", // 电子邮箱
        employee_sex: "", // 男女单选
        employee_birthday: "", //生日 日期选择
        employee_role: '', //角色权限
      },
      options: [],
      // value: "请选择",
      optionsRoot: [],
      // value2: "请选择",
    };
  },
  created() {
    addDepSelectAxios()
      .then((res) => {
        console.log("部门下拉请求成功", res.data.data);
        this.options = res.data.data;
        this.id = res.data.data.dept_id;
      })
      .catch((err) => {
        console.log("请求部门下拉列表失败", err);
      });
    addDepRoleAxios()
      .then((res) => {
        this.optionsRoot = res.data.data;
        console.log('权限',res.data);
      })
      .catch((err) => {
        console.log("请求权限下拉列表失败", err);
      });
  },
  methods: {
    addStaff() {
      addDepAxios(this.dept_name)
        .then((res) => {
          console.log("新增部门请求成功：", res.data);
        })
        .catch((err) => {
          console.log("新增部门请求失败：", err);
        });
    },

    btnSave() {
      addStaffAxios(this.form)
        .then((res) => {
          this.$message({
            message: "保存成功！",
            type: "success",
          });
          this.$router.push('/staff/staff-list')
          // let arr = {
          //   employee_login: this.employee_login, // 账号
          //   anthority_name: this.anthority_name, //真实姓名
          //   employee_password: this.employee_password, //密码
          //   employee_clientlimit: this.employee_clientlimit, //客户数量限制
          //   employee_sal: this.employee_sal, //提成
          //   employee_tel: this.employee_tel, // 手机号码
          //   employee_email: this.employee_email, // 电子邮箱
          //   employee_sex: this.employee_sex, // 男女单选
          //   employee_birthday: this.employee_birthday, //生日 日期选择
          // };
          // arr = this.form
          console.log("员工管理新增员工成功", res);
          console.log("成功输出表单数据", this.form);
        })
        .catch((err) => {
          this.$message.error('保存出错！');
          console.log("员工管理新增员工失败", err);
          console.log("失败输出表单数据", this.form);
        });
    },
    open() {
      this.$prompt("新增部门", "新增部门", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.dept_name = value;
          this.addStaff();
          this.$message({
            type: "success",
            message: "你新增的部门是 " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    open2() {
      this.$prompt("新增权限", "新增权限", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "你新增的权限是 " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    btnClose() {
      this.$confirm("确定要关闭当前页面吗?, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message(
            {
              type: "success",
              message: "关闭成功!",
            },
            this.$router.push("/staff/staff-list")
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消关闭",
          });
        });
    },
  },
  watch(){

  }
};
</script>

<style>
.selectBox {
  width: 150px;
}
.limit {
  width: 100px;
}
.footBtn {
  margin-left: 270px;
}
.btnClose {
  background: #e47470;
  border: none;
}
</style>